<template>
  <div ref="boxwrap" class="LineStatus-Second">
    <div class="pick-wrap">
      <div class="time-pick">
        <el-date-picker
          v-model="year"
          type="year"
          placeholder="选择年份"
          value-format="yyyy"
          :clearable="false"
          @change="changeYearMonth"
        />
        <span>年</span>
      </div>
      <div class="time-pick">
        <el-date-picker
          v-model="month"
          type="month"
          placeholder="选择月份"
          value-format="MM"
          :clearable="false"
          format="M"
          @change="changeYearMonth"
        />
        <span>月</span>
      </div>
      <div class="line-pick">
        <span>线别</span>
        <el-select v-model="lineSelect" placeholder="请选择" @change="changeLines()">
          <el-option label="合并" value="0" />
          <el-option
            v-for="item in lineSelectOption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </div>
    </div>
    <div class="main-content" @click="thirdPage">
      <div class="box-wrap">
        <div class="title">稼动率(MTTR)</div>
        <div class="chart-wrap activation-circle">
          <div class="total-activation">
            <gauge id="activation-gauge-total" height="100%" width="100%" color="orange" ctitle="本月累计稼动率" :value="totalActivate" />
          </div>
          <div v-for="(item, index) in lineActivate" :key="item.lineId" class="line-activation">
            <div>
              <gauge :id="'activation-gauge' + item.lineId" height="100%" width="100%" :color="colors[index]" :ctitle="item.lineName + '当日稼动率'" :value="item.value" />
            </div>
            <div>
              <gauge :id="'activation-gauge-pre' + item.lineId" height="100%" width="100%" :color="colors[index]" :ctitle="item.lineName + '当日预测稼动率'" :value="item.total" />
            </div>
          </div>
        </div>
        <div class="chart-wrap line-chart">
          <line-chart v-if="showCharts.line" id="activation-line" height="100%" width="100%" :data="activateLineChart" />
        </div>
      </div>
      <div class="box-wrap">
        <div class="title">设备保养</div>
        <div class="chart-wrap device-maintain">
          <div class="row">
            <div class="box">
              <span>5%</span>
              <el-divider />
              <span>故障率(MTTF)</span>
            </div>
            <div class="gauge-chart">
              <gauge id="activation-gauge-achieve" height="100%" width="100%" color="#00df5f" ctitle="达成率" :value="achievement" />
            </div>
            <div class="gauge-chart">
              <gauge id="activation-gauge-ontime" height="100%" width="100%" color="purple" ctitle="准时率" :value="ontime" />
            </div>
          </div>
          <div class="row next-time">
            <span>预计下次保养时间</span>
            <span>8月1日</span>
          </div>
          <div class="row">
            <bar-chart id="maintain-bar" height="100%" width="100%" />
          </div>
        </div>
      </div>
      <div class="box-wrap">
        <div class="title">待机时间分布</div>
        <div class="chart-wrap">
          <scatter-chart v-if="showCharts.scatter" id="scatter-chart" height="100%" width="100%" :data="shutDownTimeList" />
        </div>
      </div>
      <div class="box-wrap">
        <div class="title">当前设备生产稼动率</div>
        <div ref="tablewrap" class="chart-wrap current-activation">
          <div v-for="(value,key) in timeBarData" :key="key">
            <div class="prod-status">
              <span>&nbsp;<i>80%</i></span>
              <div>
                <times-bar :id="'times-bar'+key" height="100%" width="100%" :data="value.list" />
              </div>
              <span>故障率<i>5%</i></span>
            </div>
            <div class="detail-table">
              <el-table :data="value.datas" size="medium" border :height="tableHeight" :max-height="tableHeight">
                <el-table-column prop="lineName" label="线别" />
                <el-table-column prop="time" label="未生产时间段" />
                <el-table-column prop="value" label="耗时/h" />
                <el-table-column prop="total" label="累计耗时/h" />
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <vxe-modal
      v-model="showThirdPage"
      width="700"
      height="500"
      show-zoom
      class-name="layer-style"
    >
      <template #title>
        <span>产线状态三阶</span>
      </template>
      <template #default>
        <line-status-third :params="thirdParam" />
      </template>
    </vxe-modal>
  </div>
</template>

<script>
import Gauge from './charts/linestatus/Gauge'
import LineChart from './charts/linestatus/Line'
import BarChart from './charts/linestatus/Bar'
import ScatterChart from './charts/linestatus/Scatter'
import TimesBar from './charts/linestatus/TimesBar'
import { parseTime, cutLineName } from '@/utils'
import { getSecondActivation, getSecondProduct, shutDownTime } from '@/api/screen'
import { getLineByProcess } from '@/api/conf'
import LineStatusThird from '@/views/screenThird/LineStatusThird.vue'
export default {
  name: 'LineStatusSecond',
  components: { Gauge, LineChart, BarChart, ScatterChart, TimesBar, LineStatusThird },
  data() {
    return {
      colors: ['deepskyblue', '#00df5f', 'purple', 'pink'],
      year: '2021',
      month: '8',
      yearMonth: '',
      lineSelect: '0',
      lineSelectOption: [],
      tableHeight: 'auto',
      tableDataList: [],
      regionid: '', // 缓存的制程
      lineId: '', // 缓存的产线
      lineIds: '', // 本制程下所有产线id  '1,2'
      allLinesObj: {}, // 本制程下所有产线 {1:{}}, 2:{}}
      query: {
        month: '',
        lineIds: ''
      },
      showCharts: {
        line: false,
        bar: false,
        scatter: false
      },
      totalActivate: 90, // 左上：本月累计稼动率
      lineActivate: [], // 左上：产线稼动率
      activateLineChart: {}, // 左上：稼动率折线图
      achievement: 95, // 右上：达成率
      ontime: 98, // 右上：准时率
      shutDownTimeList: [],
      timeBarData: {}, // 右下：未生产时间段的timebar和table数据
      showThirdPage: false,
      thirdParam: {}
    }
  },
  mounted() {
    this.getDomStyle()
  },
  created() {
    this.year = parseTime(new Date(), '{y}')
    this.month = parseTime(new Date(), '{m}')
    this.yearMonth = this.year + '-' + this.month
    this.regionid = parseInt(this.$Cookies.get('currentReginid'))
    this.lineId = parseInt(this.$Cookies.get('currentLineId'))
    this.getLineIds()
  },
  methods: {
    getDomStyle() {
      const that = this
      const dom = this.$refs.boxwrap
      this.$erd.listenTo(dom, function(element) {
        that.tableHeight = ((dom.clientHeight / 2 - 60) - 20) / 2 - 85
      })
    },
    getLineIds() {
      // 制程内的所有产线
      getLineByProcess({ regionid: this.regionid }).then(res => {
        this.lineIds = res.data.filter(val => {
          return val.regionid === this.regionid
        }).map(val => {
          return val.id
        }).join(',')
        res.data.forEach(item => {
          this.allLinesObj[item.id] = item
        })
        this.lineSelectOption = res.data
        this.ajaxAll()
      })
    },
    // 部分制程的所有产线
    changeYearMonth() {
      this.yearMonth = this.year + '-' + this.month
      if (this.showThirdPage) {
        this.thirdParam = {
          month: this.yearMonth,
          regionid: this.regionid,
          lineId: this.lineId,
          regionName: '',
          lineName: ''
        }
      }
      this.ajaxAll()
    },
    changeLines() {
      // console.log(this.lineSelect)
      if (this.showThirdPage) {
        this.thirdParam = {
          month: this.yearMonth,
          regionid: this.regionid,
          lineId: this.lineId,
          regionName: '',
          lineName: ''
        }
      }
      this.ajaxAll()
    },
    ajaxAll() {
      this.query = {
        month: this.yearMonth,
        lineIds: this.lineSelect === '0' ? this.lineIds : this.lineSelect
      }
      // console.log(this.query)
      getSecondActivation(this.query).then(res => {
        const data = res.data
        this.lineActivate = data.current.map(item => {
          // item.lineName = cutLineName(item.lineName)
          item.lineName = cutLineName(this.allLinesObj[item.lineId].name)
          return item
        })
        let tempList = []
        const tempActivate = {}
        for (const k in data.history) {
          tempList = []
          data.history[k].forEach(item => {
            tempList.push([item.rectime, item.trans])
          })
          tempActivate[cutLineName(this.allLinesObj[k].name)] = tempList
        }
        this.activateLineChart = Object.assign({}, tempActivate)
        this.showCharts.line = true
      })
      getSecondProduct(this.query).then(res => {
        this.timeBarData = Object.assign({}, res.data)
      })
      shutDownTime(this.query).then(res => {
        this.shutDownTimeList = [].concat(res.data)
        this.showCharts.scatter = true
      })
    },
    thirdPage() {
      this.thirdParam = {
        month: this.yearMonth,
        regionid: this.regionid,
        lineId: this.lineId
      }
      // console.log('二阶传参', this.thirdParam)
      this.showThirdPage = true
    }
  }
}
</script>

<style lang="scss" scoped>
.el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 120px;
}
.el-divider--horizontal{
  margin: 0;
}
.el-divider {
    background-color: #0095e3;
}
.LineStatus-Second{
  width: 100%;
  height: 100%;

  .pick-wrap{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 10px;
    > div {
      margin-right: 10px;
      span{
        margin: 0 5px;
      }
    }
  }

  .main-content{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: calc(100% - 46px);

    .box-wrap{
      width: 50%;
      height: 50%;

      &:nth-child(2n){
        border-left: 1px solid #5967a4;
      }
      &:nth-last-child( -n + 2){
        border-top: 1px solid #5967a4;
      }

      .title{
        text-align: center;
        margin: 5px 0;
      }
      .chart-wrap{
        height: calc(100% - 40px);
      }

      .activation-circle{
        width: 100%;
        height: calc((100% - 30px) * 0.6);
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-around;

        > div {
          width: 33.3%;
          height: 100%;
        }

        .line-activation{
            display: flex;
            flex-direction: column;
            > div{
              height: 50%;
            }
          }
      }

      .chart-wrap.line-chart{
        height: calc((100% - 30px) * 0.4);
      }

      .device-maintain{
        // display: flex;
        // flex-direction: column;
        // flex-wrap: nowrap;
        // justify-content: space-around;

        .row{
          width: 100%;
          &:first-child{
            height: 150px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-content: stretch;

            .box{
              width: 150px;
              max-height: 150px;
              height: 100%;
              margin: 0 10px;
              border: 3px solid #0095e3;
              border-radius: 5px;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-evenly;

              span{
                display: inline-block;
                width: 100%;
                text-align: center;
              }
            }
            .gauge-chart{
              width: calc((100% - 170px) / 2);
              max-height: 150px;
              height: 100%;
            }
        }

        &:last-child{
          height: calc(100% - 200px);
        }

      }
           .next-time{
              width: 100%;
              height: 50px;
              text-align: center;
              span:first-child{
                width: 160px;
              }
              span{
                display: inline-block;
                width: 120px;
                line-height: 20px;
                border: 3px solid #0095e3;
                padding: 10px 0;
                text-align: center;
              }
            }

      }

      .current-activation{
          padding: 0 10px;
          > div {
            height: 50%;
          }

          .prod-status{
            height: 80px;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: flex-start;
            justify-content: space-between;

            span{
              width: 60px;
              height: 55px;

              i{
                width: 60px;
                height: 30px;
                display: inline-block;
                text-align: center;
                font-style: normal;
                line-height: 30px;
                background-color: gray;
              }

              &:first-child i{
                height: 45px;
                line-height: 45px;
                margin-top: 5px;
              }

              &:last-child i{
                  background-color: deepskyblue;
                }
            }
            > div{
              height: 100%;
              flex: 1;
            }
          }

          .detail-table{
            height: calc(100% - 80px);
            .el-table{
              height: 100%;
            }
          }
        }
    }
  }
}
// @media screen and (max-width: 900px){
//   .half-circle-wrap{
//     height: 75px !important;

//     .half-circle{
//       width: 150px !important;
//       height: 75px !important;
//       border-radius:75px 75px 0 0 !important;
//     }
//   }
// }
</style>
